Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix modals in Edge. #12241

Merged
merged 1 commit into from Nov 27, 2018
Merged

Fix modals in Edge. #12241

merged 1 commit into from Nov 27, 2018

Conversation

jasmussen
Copy link
Contributor

This PR fixes #11585.

Edge has a buggy implementation of position: sticky;, which includes issues with flickering, z-index, and parent container paddings. See more at https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/17555420/.

This is mainly an issue in deeply nested elements, it seems.

This PR includes an edge only hack that overrides the sticky and uses position: fixed; instead.

JIFs, Edge:

edge modals

IE 11:

ie modals

Chrome, Mac:

chrome mac

Safari, Mac:

safari mac

Firefox, Mac:

firefox mac

This PR fixes #11585.

Edge has a buggy implementation of `position: sticky;`, which includes issues with flickering, z-index, and parent container paddings. See more at https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/17555420/.

This is mainly an issue in deeply nested elements, it seems.

This PR includes an edge only hack that overrides the sticky and uses `position: fixed;` instead.
@jasmussen jasmussen added [Type] Bug An existing feature does not function as intended [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Type] Regression Related to a regression in the latest release labels Nov 23, 2018
@jasmussen jasmussen self-assigned this Nov 23, 2018
@jasmussen jasmussen requested a review from a team November 23, 2018 08:51
Copy link
Member

@tofumatt tofumatt left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Coolio, thanks!

@@ -66,13 +66,20 @@
justify-content: space-between;
background: $white;
align-items: center;
box-sizing: border-box;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Was this just not needed anymore? It doesn’t seem related to the other changes.

Copy link
Contributor Author

@jasmussen jasmussen Nov 23, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, good catch, I should've noted that as a code comment. Turns out that rule was written out twice in the same rule. Here it is on line 61, still there:

box-sizing: border-box;

Thank you for the review.

@jasmussen jasmussen added this to the 4.6 milestone Nov 23, 2018
@jasmussen jasmussen merged commit 5aacd90 into master Nov 27, 2018
@jasmussen jasmussen deleted the fix/edge-modal branch November 27, 2018 09:17
youknowriad pushed a commit that referenced this pull request Nov 29, 2018
This PR fixes #11585.

Edge has a buggy implementation of `position: sticky;`, which includes issues with flickering, z-index, and parent container paddings. See more at https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/17555420/.

This is mainly an issue in deeply nested elements, it seems.

This PR includes an edge only hack that overrides the sticky and uses `position: fixed;` instead.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Type] Bug An existing feature does not function as intended [Type] Regression Related to a regression in the latest release
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Modal header hidden in Edge
2 participants